import 'dart:convert';
import 'dart:typed_data';

import 'package:flutter/widgets.dart';
import 'package:mpcore/mpkit/mpkit.dart';

class ImagePage extends StatelessWidget {
  Widget _renderBlock(Widget child) {
    return Padding(
      padding: EdgeInsets.all(12),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: Container(
          color: Colors.white,
          child: child,
        ),
      ),
    );
  }

  Widget _renderHeader(String title) {
    return Container(
      height: 48,
      padding: EdgeInsets.only(left: 12),
      child: Align(
        alignment: Alignment.centerLeft,
        child: Row(
          children: [
            Expanded(
              child: Text(
                title,
                style: TextStyle(fontSize: 14, color: Colors.black54),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MPScaffold(
      name: 'Image',
      backgroundColor: Color.fromARGB(255, 236, 236, 236),
      body: ListView(
        children: [
          _renderBlock(Column(
            children: [
              _renderHeader('Image with remote url.'),
              Container(
                color: Colors.yellow,
                height: 100,
                child: Image.network(
                  'https://www-jsdelivr-com.onrender.com/img/landing/built-for-production-icon@2x.png',
                ),
              ),
              SizedBox(height: 16),
            ],
          )),
          _renderBlock(Column(
            children: [
              _renderHeader('Image with asset.'),
              Container(
                width: 100,
                height: 100,
                child: Image.asset(
                  'assets/images/pony_avatar.jpeg',
                  // package: 'mpflutter_template',
                ),
              ),
              SizedBox(height: 16),
            ],
          )),
          _renderBlock(Column(
            children: [
              _renderHeader('Image with fit = BoxFit.fill.'),
              Container(
                width: 200,
                height: 100,
                child: Image.network(
                  'https://www-jsdelivr-com.onrender.com/img/landing/built-for-production-icon@2x.png',
                  fit: BoxFit.fill,
                ),
              ),
              SizedBox(height: 16),
            ],
          )),
          _renderBlock(Column(
            children: [
              _renderHeader('Image with remote svg url.'),
              Container(
                width: 100,
                height: 100,
                child: Image.network(
                  'https://www-jsdelivr-com.onrender.com/img/logo-horizontal.svg',
                ),
              ),
              SizedBox(height: 16),
            ],
          )),
          _renderBlock(Column(
            children: [
              _renderHeader('Image with local svg string.'),
              Container(
                width: 100,
                height: 100,
                child: Image.memory(
                  Uint8List.fromList(utf8.encode('''
<svg viewBox="0.00000 0.00000 200.00000 200.00000" xmlns="http://www.w3.org/2000/svg"><path d="M 0.00000 0.00000 h 66.66667 v 9.52381 h -66.66667 z M 76.19048 0.00000 h 9.52381 v 9.52381 h -9.52381 z M 95.23810 0.00000 h 28.57143 v 9.52381 h -28.57143 z M 133.33333 0.00000 h 66.66667 v 9.52381 h -66.66667 z M 0.00000 9.52381 h 9.52381 v 9.52381 h -9.52381 z M 57.14286 9.52381 h 9.52381 v 9.52381 h -9.52381 z M 95.23810 9.52381 h 19.04762 v 9.52381 h -19.04762 z M 133.33333 9.52381 h 9.52381 v 9.52381 h -9.52381 z M 190.47619 9.52381 h 9.52381 v 9.52381 h -9.52381 z M 0.00000 19.04762 h 9.52381 v 9.52381 h -9.52381 z M 19.04762 19.04762 h 28.57143 v 9.52381 h -28.57143 z M 57.14286 19.04762 h 9.52381 v 9.52381 h -9.52381 z M 76.19048 19.04762 h 19.04762 v 9.52381 h -19.04762 z M 104.76190 19.04762 h 9.52381 v 9.52381 h -9.52381 z M 133.33333 19.04762 h 9.52381 v 9.52381 h -9.52381 z M 152.38095 19.04762 h 28.57143 v 9.52381 h -28.57143 z M 190.47619 19.04762 h 9.52381 v 9.52381 h -9.52381 z M 0.00000 28.57143 h 9.52381 v 9.52381 h -9.52381 z M 19.04762 28.57143 h 28.57143 v 9.52381 h -28.57143 z M 57.14286 28.57143 h 9.52381 v 9.52381 h -9.52381 z M 76.19048 28.57143 h 19.04762 v 9.52381 h -19.04762 z M 114.28571 28.57143 h 9.52381 v 9.52381 h -9.52381 z M 133.33333 28.57143 h 9.52381 v 9.52381 h -9.52381 z M 152.38095 28.57143 h 28.57143 v 9.52381 h -28.57143 z M 190.47619 28.57143 h 9.52381 v 9.52381 h -9.52381 z M 0.00000 38.09524 h 9.52381 v 9.52381 h -9.52381 z M 19.04762 38.09524 h 28.57143 v 9.52381 h -28.57143 z M 57.14286 38.09524 h 9.52381 v 9.52381 h -9.52381 z M 76.19048 38.09524 h 9.52381 v 9.52381 h -9.52381 z M 104.76190 38.09524 h 9.52381 v 9.52381 h -9.52381 z M 133.33333 38.09524 h 9.52381 v 9.52381 h -9.52381 z M 152.38095 38.09524 h 28.57143 v 9.52381 h -28.57143 z M 190.47619 38.09524 h 9.52381 v 9.52381 h -9.52381 z M 0.00000 47.61905 h 9.52381 v 9.52381 h -9.52381 z M 57.14286 47.61905 h 9.52381 v 9.52381 h -9.52381 z M 85.71429 47.61905 h 38.09524 v 9.52381 h -38.09524 z M 133.33333 47.61905 h 9.52381 v 9.52381 h -9.52381 z M 190.47619 47.61905 h 9.52381 v 9.52381 h -9.52381 z M 0.00000 57.14286 h 66.66667 v 9.52381 h -66.66667 z M 76.19048 57.14286 h 9.52381 v 9.52381 h -9.52381 z M 95.23810 57.14286 h 9.52381 v 9.52381 h -9.52381 z M 114.28571 57.14286 h 9.52381 v 9.52381 h -9.52381 z M 133.33333 57.14286 h 66.66667 v 9.52381 h -66.66667 z M 104.76190 66.66667 h 19.04762 v 9.52381 h -19.04762 z M 0.00000 76.19048 h 38.09524 v 9.52381 h -38.09524 z M 57.14286 76.19048 h 9.52381 v 9.52381 h -9.52381 z M 76.19048 76.19048 h 57.14286 v 9.52381 h -57.14286 z M 152.38095 76.19048 h 28.57143 v 9.52381 h -28.57143 z M 190.47619 76.19048 h 9.52381 v 9.52381 h -9.52381 z M 19.04762 85.71429 h 9.52381 v 9.52381 h -9.52381 z M 47.61905 85.71429 h 9.52381 v 9.52381 h -9.52381 z M 76.19048 85.71429 h 9.52381 v 9.52381 h -9.52381 z M 95.23810 85.71429 h 57.14286 v 9.52381 h -57.14286 z M 171.42857 85.71429 h 19.04762 v 9.52381 h -19.04762 z M 0.00000 95.23810 h 19.04762 v 9.52381 h -19.04762 z M 57.14286 95.23810 h 9.52381 v 9.52381 h -9.52381 z M 76.19048 95.23810 h 19.04762 v 9.52381 h -19.04762 z M 104.76190 95.23810 h 9.52381 v 9.52381 h -9.52381 z M 161.90476 95.23810 h 38.09524 v 9.52381 h -38.09524 z M 0.00000 104.76190 h 9.52381 v 9.52381 h -9.52381 z M 19.04762 104.76190 h 9.52381 v 9.52381 h -9.52381 z M 38.09524 104.76190 h 9.52381 v 9.52381 h -9.52381 z M 76.19048 104.76190 h 38.09524 v 9.52381 h -38.09524 z M 133.33333 104.76190 h 28.57143 v 9.52381 h -28.57143 z M 0.00000 114.28571 h 9.52381 v 9.52381 h -9.52381 z M 38.09524 114.28571 h 9.52381 v 9.52381 h -9.52381 z M 57.14286 114.28571 h 19.04762 v 9.52381 h -19.04762 z M 114.28571 114.28571 h 9.52381 v 9.52381 h -9.52381 z M 76.19048 123.80952 h 9.52381 v 9.52381 h -9.52381 z M 95.23810 123.80952 h 19.04762 v 9.52381 h -19.04762 z M 133.33333 123.80952 h 9.52381 v 9.52381 h -9.52381 z M 152.38095 123.80952 h 9.52381 v 9.52381 h -9.52381 z M 171.42857 123.80952 h 28.57143 v 9.52381 h -28.57143 z M 0.00000 133.33333 h 66.66667 v 9.52381 h -66.66667 z M 85.71429 133.33333 h 38.09524 v 9.52381 h -38.09524 z M 142.85714 133.33333 h 28.57143 v 9.52381 h -28.57143 z M 0.00000 142.85714 h 9.52381 v 9.52381 h -9.52381 z M 57.14286 142.85714 h 9.52381 v 9.52381 h -9.52381 z M 142.85714 142.85714 h 9.52381 v 9.52381 h -9.52381 z M 161.90476 142.85714 h 38.09524 v 9.52381 h -38.09524 z M 0.00000 152.38095 h 9.52381 v 9.52381 h -9.52381 z M 19.04762 152.38095 h 28.57143 v 9.52381 h -28.57143 z M 57.14286 152.38095 h 9.52381 v 9.52381 h -9.52381 z M 85.71429 152.38095 h 9.52381 v 9.52381 h -9.52381 z M 114.28571 152.38095 h 38.09524 v 9.52381 h -38.09524 z M 161.90476 152.38095 h 9.52381 v 9.52381 h -9.52381 z M 180.95238 152.38095 h 19.04762 v 9.52381 h -19.04762 z M 0.00000 161.90476 h 9.52381 v 9.52381 h -9.52381 z M 19.04762 161.90476 h 28.57143 v 9.52381 h -28.57143 z M 57.14286 161.90476 h 9.52381 v 9.52381 h -9.52381 z M 76.19048 161.90476 h 9.52381 v 9.52381 h -9.52381 z M 104.76190 161.90476 h 9.52381 v 9.52381 h -9.52381 z M 133.33333 161.90476 h 9.52381 v 9.52381 h -9.52381 z M 180.95238 161.90476 h 9.52381 v 9.52381 h -9.52381 z M 0.00000 171.42857 h 9.52381 v 9.52381 h -9.52381 z M 19.04762 171.42857 h 28.57143 v 9.52381 h -28.57143 z M 57.14286 171.42857 h 9.52381 v 9.52381 h -9.52381 z M 76.19048 171.42857 h 19.04762 v 9.52381 h -19.04762 z M 114.28571 171.42857 h 9.52381 v 9.52381 h -9.52381 z M 133.33333 171.42857 h 9.52381 v 9.52381 h -9.52381 z M 161.90476 171.42857 h 9.52381 v 9.52381 h -9.52381 z M 0.00000 180.95238 h 9.52381 v 9.52381 h -9.52381 z M 57.14286 180.95238 h 9.52381 v 9.52381 h -9.52381 z M 76.19048 180.95238 h 19.04762 v 9.52381 h -19.04762 z M 123.80952 180.95238 h 9.52381 v 9.52381 h -9.52381 z M 142.85714 180.95238 h 19.04762 v 9.52381 h -19.04762 z M 190.47619 180.95238 h 9.52381 v 9.52381 h -9.52381 z M 0.00000 190.47619 h 66.66667 v 9.52381 h -66.66667 z M 76.19048 190.47619 h 28.57143 v 9.52381 h -28.57143 z M 123.80952 190.47619 h 9.52381 v 9.52381 h -9.52381 z M 142.85714 190.47619 h 9.52381 v 9.52381 h -9.52381 z M 171.42857 190.47619 h 9.52381 v 9.52381 h -9.52381 z " style="fill: #000000"/><text style="fill: #000000; font-family: &quot;monospace&quot;; font-size: 40.00000px" x="0.00000" y="0.00000"></text></svg>
''')),
                  imageType: 'svg+xml',
                ),
              ),
              SizedBox(height: 16),
            ],
          )),
        ],
      ),
    );
  }
}
